import PopHtml from '../lib/PopHtml'
export default {
    name: 'MixinPopUptest',
    data() {
        return {
            popHtmlPointTest1: [[109.7, 34.151], [109.8, 34.151], [109.9, 34.151]]
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initPointPOPTest1()
        })
    },
    methods: {
        initPointPOPTest1() {
            this.popHtmlPointTest1.forEach((item, index) => {
                var entity = {
                    eventName: 'popHtmlPointTest1',
                    position: Cesium.Cartesian3.fromDegrees(item[0], item[1]),
                    prop: { ...item, index },
                    point: {
                        pixelSize: 5,
                        color: Cesium.Color.YELLOW,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                    }
                }
                this.$viewer.entities.add(entity)
                new PopHtml({
                    name: 'popHtml_' + index,
                    viewer: this.$viewer,
                    properties: { ...item, index },
                    geometry: Cesium.Cartesian3.fromDegrees(item[0], item[1])
                })
            })
            this.initEventPOPHtml()
        },
        initEventPOPHtml() {
            this.screenSpaceEventHandlerHtml = new Cesium.ScreenSpaceEventHandler(
                this.$viewer.scene.canvas
            )
            this.screenSpaceEventHandlerHtml.setInputAction((event) => {
                const pickedObject = this.$viewer.scene.pick(event.position)
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName &&
                    pickedObject.id.eventName === 'popHtmlPointTest1'
                ) {
                    var prop = pickedObject.id.prop
                    var id = document.getElementById('popHtml_' + prop.index)
                    if (!id) {
                        new PopHtml({
                            name: 'popHtml_' + prop.index,
                            viewer: this.$viewer,
                            properties: prop,
                            geometry: Cesium.Cartesian3.fromDegrees(prop[0], prop[1])
                        })
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        }
    }
}

